<template>
  <section class="view-box">
    <div class="top-box">
      <el-breadcrumb :separator-icon="ArrowRight">
        <el-breadcrumb-item :to="{ name: 'talk' }">语音群聊</el-breadcrumb-item>
        <el-breadcrumb-item>1对1视频通话</el-breadcrumb-item>
      </el-breadcrumb>
      <div class="btn-box">
        <el-button
          :type="localAudio ? 'warning' : 'primary'"
          @click="setLocalAudio(!localAudio)"
          >{{ localAudio ? "关闭麦克风" : "开启麦克风" }}</el-button
        >
        <el-button
          :type="localVideo ? 'warning' : 'primary'"
          @click="setLocalVideo(!localVideo)"
          >{{ localVideo ? "关闭摄像头" : "开启摄像头" }}</el-button
        >
      </div>
      <talk-one-center 
      :local-user="remoteUser" 
      :remote-user="sotre.state.admin"
      @setRemoteAudio="setRemoteAudio"
      ref="talkOneCenter"></talk-one-center>
    </div>
    <footer-log :model-value="logs"></footer-log>
  </section>
</template>
<script lang="ts" setup>
import { onActivated, onDeactivated, computed,onMounted,ref } from "vue";
import {useStore} from "vuex";
import TalkOneCenter from "@/components/adm/talk/TalkOneCenter.vue";
import {
  Microphone,
  Mute,
  VideoPlay,
  VideoPause,
  ArrowRight,
} from "@element-plus/icons-vue";
import UserList from "@/components/adm/talk/UserList.vue";
import FooterLog from "@/components/adm/talk/FooterLog.vue";
import setupRTC from "@/util/rtc";

const props = defineProps({
  params: {
    type: Object,
    required: true,
  },
});

const sotre = useStore();

const {
  localAudio,
  localVideo,
  setJoinChannel,
  setLocalAudio,
  setLocalVideo,
  logs,
  userListData,
  initLocalStream,
  initRemoteStream,
  setRemoteAudio
} = setupRTC();

const remoteUser = computed(() => {
  return userListData.find((v) => v.t_admin_pk == props.params.t_admin_pk) || {};
})

const talkOneCenter = ref();

// 播放本地的视频
const playLocalVideo = () => {
  const div = talkOneCenter.value.localVideoDiv;
  console.log("localDiv = ",div);
}

// 激活时加入房间
onActivated(() => {
  const channelName = props.params.channelName;

  setJoinChannel(true,channelName).then(() => {
    initLocalStream(talkOneCenter.value.localVideoDiv);
    initRemoteStream(talkOneCenter.value.remoteVideoDiv)
  })
});

// 取消激活时离开房间
onDeactivated(() => {
  setJoinChannel(false);
  logs.length = 0;
});

// onMounted(() => playLocalVideo())
</script>
<style lang="scss" scoped>
.view-box {
  display: flex;
  height: calc(100vh - 40px);
  justify-content: space-between;
  flex-direction: column;

  .el-breadcrumb {
    padding: 10px 0px;
  }

  .btn-box {
    padding-bottom: 10px;
  }

  .video {
    width: 300px;
    height: 600px;
  }

  .el-icon {
    width: inherit;
    justify-content: flex-end;

    .icon {
      margin-left: 10px;
      cursor: pointer;
    }
  }
}
</style>